.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
html,body{
   height: 100%;
   width: 100%;
}
li{
    list-style: none;
}


.border-radius(@width){
    .px2rem(border-radius, @width);
}
.border(@px,@xian,@color){
    .px2rem(border-width,@px);
    border-style: @xian; 
    border-color: @color;
    border-bottom: ;
}
.border-bottom(@px,@xian,@color){
    .px2rem(border-bottom-width,@px);
    border-bottom-style: @xian; 
    border-bottom-color: @color;
    
}

.box{
    display: -webkit-box;
   
}
.width(@width){
    .px2rem(width, @width);
    
   
}
.line-height(@width){
    .px2rem(line-height, @width);
    
   
}
 
.font-size(@width){
    .px2rem(font-size, @width);
    
   
}
.height(@height){
    .px2rem(height, @height);
   
   
}
.margin(@top,@right,@bottom,@left){
    .px2rem(margin-top,@top);
    .px2rem(margin-right,@right);
    .px2rem(margin-bottom,@bottom);
    .px2rem(margin-left,@left);
}
.padding(@top,@right,@bottom,@left){
    .px2rem(padding-top,@top);
    .px2rem(padding-right,@right);
    .px2rem(padding-bottom,@bottom);
    .px2rem(padding-left,@left);
}
.tab{
    position: fixed;
    bottom: 0;
    width: 100%;
    .height(100);
    background:black;
    display: flex;
    justify-content: space-around;
    a{
        height: 100%;
        display: block;
       .width(100); 
        display: flex;
        flex-direction: column;
        align-items: center;
       display: flex;
       text-decoration: none;
      color: #ffffff;
        img{
            display: block;
            .height(44);
            .padding(15,0,0,0);
            
        }
        p{
            
            text-decoration: none;
        }
    }
}
.tab .taba{
    background-repeat:no-repeat;
    background: url(../img/index-abg.png);
    background-size:1.33333333rem 1.33333333rem ;
   color: #ecd78b;
        
   
}

